<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id='light' src="../resource/off.gif"><br>

<div class="cls">传智教育</div><br>
<div class="cls">黑马程序员</div><br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<script>
    /*
       获取Element对象的方法
       getElementById()`：根据id属性值获取，返回单个Element对象
       getElementsByTagName()`：根据标签名称获取，返回Element对象数组
       getElementsByName()`：根据name属性值获取，返回Element对象数组
       getElementsByClassName()`：根据class属性值获取，返回Element对象数组
    */

    //1.getElementById()`：根据id属性值获取，返回单个Element对象
    let img = document.getElementById("light");
    // document.write(img)

    //2.getElementsByTagName()`：根据标签名称获取，返回Element对象数组
    let divs = document.getElementsByTagName("div");
    // alert(divs.length)


    //3.getElementsByName()`：根据name属性值获取，返回Element对象数组
    let bobbys = document.getElementsByName("hobby");
    // for (let i = 0; i < bobbys.length; i++) {
    //     alert(bobbys[i])
    // }

    //4.getElementsByClassName()`：根据class属性值获取，返回Element对象数组
    let clss = document.getElementsByClassName("cls");
    for (let i = 0; i < clss.length; i++) {
        alert(clss[i])
    }



</script>

</body>
</html>